Formatting text with CSS style sheets

A style is a group of formatting attributes that controls the appearance of a range of text in a single document. A CSS style sheet can be used to control several documents at once and includes all of the styles for a document. The advantage of using a CSS style sheet over an HTML style is that in addition to being linked to multiple documents, when a CSS style is updated or changed, the formatting of all the documents that use that style sheet are automatically updated as well.

CSS styles are identified by name or by HTML tag, allowing you to change an attribute of a style and see all text to which that style applies instantly reflect the change. CSS styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. CSS styles can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers.

CSS style sheets reside in the HEAD area of a document and define a series of styles. CSS styles can define the formatting attributes for HTML tags, ranges of text identified by a CLASS attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines.

CSS style sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes some CSS style sheets, but most earlier browsers ignore them.

The following three types of CSS style sheets are available in Dreamweaver:

	Custom CSS styles are similar to the styles you use in a word processor, except that there is no distinction between character and paragraph styles. You can apply CSS custom styles to any range or block of text. If the CSS style is applied to a block of text (such as an entire paragraph or unordered list), a `CLASS` attribute is added to the block's tag (for example, `P CLASS="myStyle"` or `UL CLASS="myStyle"`). If the CSS style is applied to a range of text, `SPAN` tags containing the `CLASS` attribute are inserted around the selected text. See Applying a custom (class) CSS style.
	HTML tag styles redefine the formatting for a particular tag, such as `H1`. When you create or change a CSS style for the `H1` tag, all text formatted with the `H1` tag is immediately updated.
	CSS selector styles redefine the formatting for a particular combination of tags (for example, `TD H2` applies whenever an `H2` header appears inside a table cell) or for all tags that contain a specific `ID` attribute (for example, `#myStyle` applies to all tags that contain the attribute-value pair `ID="myStyle"`).

Manual HTML formatting overrides formatting applied with CSS (or HTML) styles. For CSS styles to control the formatting of a paragraph, you must remove all manual HTML formatting or HTML styles.

Although you can set an unlimited number of CSS style attributes defined by the CSS1 specification in Dreamweaver, not all of the attributes appear in the Document window. The attributes that do not appear are marked with an asterisk (*) in the Style Definition dialog box. Note also that some of the CSS style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser.

About CSS style properties

The Cascading Style Sheets specification (CSS1), which is controlled by the World Wide Web Consortium, defines the CSS style properties (for example, font, color, padding, margin, word spacing) that control the appearance of Web page elements. You can set any CSS1 property using Dreamweaver.

In Internet Explorer 4.0, you can use a scripting language such as JavaScript or VBScript to change the positioning and CSS style properties of elements after the page has loaded. In Netscape Navigator 4.0, you cannot change CSS style properties after the page has loaded, but you can change positioning properties.